<template>
  <div class="address-cascader">
    <p-c-a-cascader-view v-model="cascaderValue" :item="item.cascader || {}" @change="handleCascaderChange" />
    <input-view v-model="inputValue" :item="item.input || {}" @change="handleInputChange"></input-view>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

import InputView from './InputView.vue';
import PCACascaderView from './PCACascaderView.vue';

const props = defineProps({
  item: {
    type: Object as any,
    default: () => {
      return [];
    },
  },
  modelValue: {
    type: Object as any,
    default: () => {
      return {};
    },
  },
});

const emits = defineEmits(['update:modelValue']);

const cascaderValue = ref('');
const inputValue = ref('');

const handleCascaderChange = (val: any, data: any) => {
  const { label } = data.node || {};
  emits('update:modelValue', { ...props.modelValue, code: val, codeLabel: label });
};

const handleInputChange = (val: any) => {
  emits('update:modelValue', { ...props.modelValue, address: val });
};

watch(
  () => props.modelValue,
  (data) => {
    cascaderValue.value = data.code;
    inputValue.value = data.address;
  },
);
</script>

<style lang="less" scoped>
.address-cascader {
  display: flex;
  align-items: center;
  gap: 16px;
}
</style>
